<template>
    <div class="login">
        <h1>普通登录组件</h1>
        <div class="account">
            <!--属性绑定
            rule-form：绑定表单数据
            rules：绑定表单规则
            @submit：成功提交回调
            @errHandle：失败提交回调
            -->
            <account-login
                    :rule-form="ruleForm"
                    :rules="rules"
                    @submit="submit"
                    @errHandle="errHandle">
            </account-login>
        </div>
        <h1>短信验证码登录组件</h1>
        <div class="phone">
            <phone-login :rule-form="phoneForm"></phone-login>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                // 表单数据
                ruleForm: {
                    username: '',
                    password: ''
                },
                // 表单验证规则
                rules: {
                    username: [
                        {
                            required: true,
                            message: '用户名不能为空',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 6,
                            message: '用户名在2到6字符之间',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: '密码不能为空',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            max: 15,
                            message: '密码在6到15字符之间',
                            trigger: 'blur'
                        }
                    ]
                },
                // 短信验证表单数据
                phoneForm: {
                    phone: '',
                    code: ''
                }
            }
        },
        methods: {
            // 成功提交的回调
            submit() {
                this.$message.success('提交成功')
            },
            // 失败提交的回调
            errHandle() {
                this.$message.error('表单提交有误，请检查')
            }
        }
    }
</script>

<style scoped>
    .login {
        margin-top: 30px;
        margin-left: 30px;
    }

    .account, .phone {
        width: 500px;
    }
</style>
